/*
 * @Author: hy
 * @Date: 2018-05-02 09:52:10
 * @Last Modified by: hy
 * @Last Modified time: 2018-05-16 21:31:03b4038
 */

// 大乐透选择页面

import React, { Component } from 'react'
import {
  WingBlank, WhiteSpace, Tabs, Modal, Toast, Accordion,
} from 'antd-mobile'
import NavBar from '@components/navbar'
import { withRouter } from 'react-router-dom'
import Button from '@components/button'

@withRouter
export default class Home extends Component {
  constructor(props) {
    super(props)
    this.state = {
      // 显示赛事筛选
      showSSSX: false,
      // 显示mask
      showMask: false,
      // 上期开奖
      preData: {
        red: ['03', '04', '10', '12', '29'],
        blue: ['11', '34'],
      },
      // 选中的红球
      checkedRedBalls: [],
      // 选中的蓝球
      checkedBlueBalls: [],
    }
  }


  /**
   * 玩法筛选
   */
  onShowMethodMask=() => {
    const { showMask } = this.state
    this.setState({
      showMask: !showMask,
    })
  }


  /**
   * 切换玩法
   */
  onChangeMethod=(item) => {
    this.setState({
      showMask: false,
      checkedMethodId: item.id,
    })
  }

  /**
   * 右方菜单
   */
  createRight=() => {
    const result = (
      <p>
        <span onClick={this.onClickZST} className="app-icon icon-zst" />
      </p>
    )

    return result
  }

  /**
   * 点击走势图
   */
  onClickZST=() => {
    console.log('走势图')
    // TODO，跳转到走势图路由
  }

  /**
   * 点击赛事筛选
   */
  onClickSSSX=() => {
    const { showSSSX } = this.state
    this.setState({
      showSSSX: !showSSSX,
    })
  }

  /**
   * 点击玩法介绍
   */
  onClickWFJS=() => {
    // ..TODO
    Toast.info('完善中...', 1)
  }


  /**
   * 选好彩票
   */
  onNext=() => {
    console.log('选号了')
    // 跳转到提交页面
    this.props.history.push('/dlt/submit')
  }

  /**
   * 生成标题
   */
  createTitle=() => '普通投注080期'


  /**
   * 创建红球列表
   */
  createRedBall=() => {
    let num = 1
    const nums = []
    const { checkedRedBalls } = this.state
    while (num < 36) {
      nums.push(num)

      num++
    }

    return nums.map(item => (
      <span
        className={checkedRedBalls.findIndex(v => v === item) !== -1 ? 'ball-item red checked' : 'ball-item red'}
        onClick={() => this.onClickRedBall(item)}
        key={item}
      >{item < 10 ? `0${item}` : item}
      </span>
    ))
  }

  /**
   * 创建蓝球列表
   */
  createBlueBall=() => {
    let num = 1
    const nums = []
    const { checkedBlueBalls } = this.state
    while (num < 13) {
      nums.push(num)

      num++
    }

    return nums.map(item => (
      <span
        className={checkedBlueBalls.findIndex(v => v === item) !== -1 ? 'ball-item blue checked' : 'ball-item blue'}
        onClick={() => this.onClickBlueBall(item)}
        key={item}
      >{item < 10 ? `0${item}` : item}
      </span>
    ))
  }

  /**
   * 点击红球
   */
  onClickRedBall=(num) => {
    const { checkedRedBalls } = this.state
    const fi = checkedRedBalls.findIndex(v => v === num)
    if (fi !== -1) {
      checkedRedBalls.splice(fi, 1)
    } else {
      checkedRedBalls.push(num)
    }
    this.setState({
      checkedRedBalls,
    })
  }

  /**
   * 点击蓝球
   */
  onClickBlueBall=(num) => {
    const { checkedBlueBalls } = this.state
    const fi = checkedBlueBalls.findIndex(v => v === num)
    if (fi !== -1) {
      checkedBlueBalls.splice(fi, 1)
    } else {
      checkedBlueBalls.push(num)
    }
    this.setState({
      checkedBlueBalls,
    })
  }

  render() {
    const {
      preData,
    } = this.state
    const title = this.createTitle()
    const right = this.createRight()
    const tabs = [
      { title: '购彩', sub: '1' },
      { title: '开奖', sub: '2' },
    ]
    return (
      <div className="page-box">
        <NavBar
          left={<span className="app-icon icon-left" onClick={this.props.history.goBack} />}
          title={title}
          right={right}
        />
        <div className="page-content contain-footer dlt-container">
          <Tabs tabs={tabs}
            initialPage={0}
            onChange={(tab, index) => { console.log('onChange', index, tab); }}
            onTabClick={(tab, index) => { console.log('onTabClick', index, tab); }}
          >
            <div>
              <div className="desc-bar">
                上期开奖
                <p className="font-red">
                  {
                    preData.red && preData.red.map((item, index) => {
                      const result = (<span key={index.toString()}>{item}</span>)
                      return result
                    })
                  }
                </p>
                <p className="font-blue">
                  {
                    preData.blue && preData.blue.map((item, index) => {
                      const result = (<span key={index.toString()}>{item}</span>)
                      return result
                    })
                  }
                </p>
              </div>
              <div className="row-item flex-row-between">
                <div className="item-left">
                  <span className="ltr-orange-red">前场</span>
                  <span>至少选择5个红球</span>
                </div>
                <div className="item-right flex-row-base">
                  <p className="flex-col-center"><span className="app-icon icon-yyz" /><span>摇一注</span></p>
                  <p className="flex-col-center"><span className="app-icon icon-yl" /><span>遗漏</span></p>
                </div>
              </div>
              <div className="ball-list flex-row-base">
                {this.createRedBall()}
              </div>
              <div className="divider-hor" />
              <div className="row-item flex-row-between">
                <div className="item-left">
                  <span className="ltr-blue">后场</span>
                  <span>至少选择2个红蓝球</span>
                </div>
              </div>
              <div className="ball-list flex-row-base">
                {this.createBlueBall()}
              </div>
            </div>
            <div>
              开奖页面
            </div>
          </Tabs>
        </div>
        <div className="page-footer">
          <p className="bottom-tips">奖池滚存<span className="font-red">56.56亿</span><span className="font-red">1198</span>倍掏空奖池</p>
          <div className="jczq-footer">
            <div className="left-content flex-col-center " onClick={this.onClearAll}>机选</div>
            <div className="right-content">
                    ...
            </div>
            <Button type="red" disabled={false} onClick={this.onNext}>选好了</Button>
          </div>
        </div>
      </div>
    )
  }
}
